<template>
  <d2-container>
 <!-- 修改弹出框 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisibleRedact">
      <el-form :model="form_add">
        <el-form-item    label="考核种类" :label-width="formLabelWidth">
          <el-input v-model="form_add.assessmentTypes" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item  label="备注" :label-width="formLabelWidth">
          <el-input v-model="form_add.describe" autocomplete="off"></el-input>
        </el-form-item>
         <!-- <div class="c">
          请选择指标:<el-select v-model="name" clearable :placeholder= "form_add.standardIdString">
        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.name">
        </el-option>
        </el-select>
         </div> -->
         <!-- <el-form-item label="所属指标" :label-width="formLabelWidth">
          <el-input v-model="form_add.standardIdString" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item  label="考核方法" :label-width="formLabelWidth">
          <el-input v-model="form_add.assessStandard" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRedact = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleupdate">修 改</el-button>
      </template>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog title="新增考核种类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="考核种类" :label-width="formLabelWidth">
          <el-input v-model="form.assessmentType" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.describe" autocomplete="off"></el-input>
        </el-form-item>
          <!-- <div class="c">
          请选择指标: <el-select v-model="name" clearable placeholder="请选择指标">
         <el-option v-for="item in options" :key="item.value"  :label="item.name"  :value="item.name">
          </el-option>
          </el-select>
          </div> -->
         <!-- <el-form-item label="所属指标" :label-width="formLabelWidth">
          <el-input v-model="form.standardIdString" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="考核办法" :label-width="formLabelWidth">
          <el-input v-model="form.assessStandard" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleAdd"
          >新 增</el-button>
      </template>
    </el-dialog>
    <template slot="header">
      <!-- 搜索框 -->
      <el-input
        v-model="tablePages.assessmentTypes"
        placeholder="考核种类"
        class="inputBox"
      ></el-input>
      <el-button type="button" class="botton_souch" @click="searchTableData" >搜索
      </el-button>
    </template>
    <!-- 按钮 -->
    <dev>
      <el-button type="button" @click="open">新增</el-button>
      <el-button type="button">删除 </el-button>
      <el-button type="button">更多操作</el-button>

      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="assessmentTypes" label="名称" width="300">
          <template slot-scope="scope">{{ scope.row.assessmentTypes }}</template>
        </el-table-column>
        <el-table-column prop="describe" label="描述" width="300">
        </el-table-column>
        <el-table-column
          prop="assessStandard"
          label="考核办法"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="creatorString" label="操作人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>

      </el-table>

        <!-- 分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <!--
            :current-page 当前页数
            :page-size 每页条数
            :total 总共条数
          -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePages.currentPage"
            :page-size="tablePages.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tablePages.total"
          >
          </el-pagination>
        </div>
    </dev></d2-container
  >
</template>
<style lang="scss" scoped>
.c {
  margin-left: 45px;
  margin-bottom: 20px;
}
// .el-form .el-select {
//   margin-left: 150px;
//   margin-bottom: 20px;
// }
.block {
  float: right;
}

.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 5%;
}
</style>

<script>
import util from '@/libs/util'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      multipleSelection: [],
      // 控制弹出框展示与隐藏
      dialogFormVisible: false,
      dialogFormVisibleadd: false,
      dialogFormVisibleRedact: false,
      // 绑定弹框中的表单数据
      form: {
        assessmentTypes: '',
        describe: '',
        date1: '',
        date2: '',
        delivery: false,
        assessmentMethod: '',
        type: [],
        resource: '',
        standardIdString: '',
        assessStandard: ''
      },
      form_add: {
        assessmentTypes: '',
        describe: '',
        id: 0,
        assessmentMethod: '',
        delivery: false,
        type: [],
        resource: '',
        standardIdString: '',
        assessStandard: ''
      },
      formLabelWidth: '120px',
      // 配置表格信息
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
        // 搜索框
        assessmentTypes: null
      },
      options: [],
      name: ''
    }
  },

  created () {
    this.getTableList(this.tablePages)
    this.getAllStandard(this.tablePages)
  },
  methods: {
    // 新增方法
    dialogFormVisibleAdd () {
      console.log(this.form) // 这个就是输入框的值
      console.log(util.cookies.get('uuid'))
      const params = {
        assessmentTypes: this.form.assessmentType,
        describe: this.form.describe,
        assessStandard: this.form.assessStandard,
        // standardIdString: this.name,
        creatorString: util.cookies.get('uuid')
      }
      this.$request({
        url: 'type/addAssessType',
        method: 'post',
        data: params
      }).then((res) => {
        this.getTableList(this.tablePages)
        this.dialogFormVisible = false
        this.$message.success('新增成功')
      })
    },
    // 查找所有
    getTableList ({ currentPage, limit, assessmentTypes }) {
      this.$request({
        url: 'type/findAllAssessType',
        method: 'post',
        data: {
          currentPage,
          limit,
          data: {
            assessmentTypes
          }
        }
      }).then((res) => {
        // 给表格赋值
        this.tableData = res.list
        // 给表格总数赋值
        this.tablePages.total = res.total
      })
    }, // 查找所有指标名
    getAllStandard () {
      this.$request({
        url: 'Standard/findAll',
        method: 'post'
      }).then((res) => {
        this.options = res
      })
    },

    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    open () {
      this.dialogFormVisible = true
    },
    /**
     * 打开编辑弹框
     * @date 2021-12-16
     * @param {any} index 下标
     * @param {any} row 当前行对象
     */
    handleEdit (index, row) {
      this.dialogFormVisibleRedact = true
      this.$request({
        url: 'type/findByTypeId',
        method: 'post',
        data: row
      }).then((res) => {
        // console.log(res[0].creator)
        this.form_add.assessmentTypes = res[0].assessmentTypes
        this.form_add.describe = res[0].describe
        this.form_add.assessStandard = res[0].assessStandard
        this.form_add.standardIdString = res[0].standardIdString
        this.form_add.id = res[0].id
      })
    },
    // 修改方法
    dialogFormVisibleupdate () {
      const params1 = {
        assessmentTypes: this.form_add.assessmentTypes,
        describe: this.form_add.describe,
        assessStandard: this.form_add.assessStandard,
        id: this.form_add.id,
        updatedString: util.cookies.get('uuid')
      }
      this.$request({
        url: 'type/updateAssessType',
        method: 'post',
        data: params1
      }).then((res) => {
        this.getTableList(this.tablePages)
        this.dialogFormVisibleRedact = false
        this.$message.success('修改成功')
      })
    },

    /**
     * 列表删除操作
     * @date 2021-12-16
     * @param {any} index 当前对象下标
     * @param {any} row 当前行对象
     */
    handleDelete (index, row) {
      this.$request({
        url: 'type/deleteAssessType',
        method: 'post',
        data: row
      }).then((res) => {
        this.$message.success((res && res.msg) || '删除成功')
        this.getTableList(this.tablePages)
      })
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange (currentPage) {
      this.tablePages.currentPage = currentPage
      this.getTableList(this.tablePages)
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange (limit) {
      this.tablePages.limit = limit
      this.getTableList(this.tablePages)
    },
    // 搜索
    searchTableData () {
      this.getTableList(this.tablePages, this.tablePages.assessmentTypes)
      this.tablePages.assessmentTypes = null
    }
  }
}
</script>
